import React, { Component } from 'react';
import css from './index.less';
import FilterSearch from '@/components/FilterSearch';
import TableList from '@/components/TableList';
import EditModal from '@/components/EditModal';
import { Button, Divider, Modal, message } from 'antd';
import { connect } from 'dva';
const { confirm } = Modal;
class Department extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  table = { fetch: () => {} };
  modal = { show: () => {} };
  modalShow = () => {};
  save = () => {
    this.setState({
      showEdit: false,
    });
    this.table.fetch();
  };
  /**
   * 除岗位
   * @param data
   */
  deletePost(data) {
    confirm({
      content: '是否确认删除岗位？',
      okText: '确认',
      cancelText: '取消',
      onOk: () => {
        this.props
          .dispatch({
            type: '$request/post',
            payload: {
              url: '/api/job/v1/delete',
              data,
            },
          })
          .then(res => {
            message.success('删除成功');
            this.table.fetch();
          });
      },
    });
  }
  filters = [
    {
      key: 'name',
      type: 'input',
      label: '岗位名称',
      config: [
        {
          max: 50,
          message: '不能超过50个字符',
        },
      ],
      placeholder: '请输入岗位名称',
    },
  ];
  editFilters = [
    {
      key: 'name',
      type: 'input',
      label: '岗位名称',
      rules: [
        {
          required: true,
        },
      ],
      placeholder: '请输入岗位名称',
    },
    {
      key: 'sort',
      type: 'inputnumber',
      label: '排序',
    },
  ];
  columns = [
    { title: '岗位ID', dataIndex: 'id' },
    { title: '岗位名称', dataIndex: 'name' },
    { title: '序号', dataIndex: 'sort' },
    {
      title: '操作',
      width: 325,
      render: (text, data) => (
        <span key={text}>
          <Button onClick={() => this.modalShow(data)}>编辑</Button>
          <Divider type="vertical" />
          <Button onClick={() => this.deletePost(data)}>删除</Button>
        </span>
      ),
    },
  ];
  render() {
    return (
      <div>
        <FilterSearch
          filters={this.filters}
          onSearch={val => this.table.fetch(val)}
        >
          <Button onClick={() => this.modalShow()}>添加</Button>
        </FilterSearch>
        <TableList
          post
          rowKey="id"
          onRef={c => {
            this.table = c;
          }}
          columns={this.columns}
          source="/api/job/v1/query"
        />
        <EditModal
          title="岗位编辑"
          filters={this.editFilters}
          onShow={v => (this.modalShow = v)}
          onSave={() => this.table.fetch()}
          createUrl="/api/job/v1/create"
          updateUrl="/api/job/v1/update"
        />
      </div>
    );
  }
}

export default connect(state => state.base)(Department);
